<template>
    <el-row :gutter="20">
      <el-col :sm="2" :lg="2" style="padding-left: 10px">
        <el-card class="box-card card_1_body" style="min-height: 1em;" align="middle" onclick="">
          <span class="card_title"></span>
          <div class="el-card__body mid">
            <span class="card_num">56</span>
          </div>
        </el-card>
      </el-col>

      <el-col :sm="2" :lg="2" style="padding-left: 10px">
        <el-card class="box-card card_2_body" style="min-height: 1em;" align="middle" onclick="">
          <span class="card_title">大屏2</span>
          <div class="el-card__body mid">
            <span class="card_num">123</span>
          </div>
        </el-card>
      </el-col>

      <el-col :sm="2" :lg="2" style="padding-left: 10px">
        <el-card class="box-card card_3_body" style="min-height: 1em;" align="middle" onclick="">
          <span class="card_title">大屏3</span>
          <div class="el-card__body mid">
            <span class="card_num">78</span>
          </div>
        </el-card>
      </el-col>

      <el-col :sm="2" :lg="2" style="padding-left: 10px">
        <el-card class="box-card card_4_body" style="min-height: 1em;" align="middle" onclick="">
          <span class="card_title">大屏4</span>
          <div class="el-card__body mid">
            <span class="card_num">12</span>
          </div>
        </el-card>
      </el-col>
      <el-col :sm="2" :lg="2" style="padding-left: 10px">
        <el-card class="box-card card_1_body" style="min-height: 1em;" align="middle" onclick="">
          <span class="card_title">大屏1</span>
          <div class="el-card__body mid">
            <span class="card_num">56</span>
          </div>
        </el-card>
      </el-col>

      <el-col :sm="2" :lg="2" style="padding-left: 10px">
        <el-card class="box-card card_2_body" style="min-height: 1em;" align="middle" onclick="">
          <span class="card_title">大屏2</span>
          <div class="el-card__body mid">
            <span class="card_num">123</span>
          </div>
        </el-card>
      </el-col>

      <el-col :sm="2" :lg="2" style="padding-left: 10px">
        <el-card class="box-card card_3_body" style="min-height: 1em;" align="middle" onclick="">
          <span class="card_title">大屏3</span>
          <div class="el-card__body mid">
            <span class="card_num">78</span>
          </div>
        </el-card>
      </el-col>

      <el-col :sm="2" :lg="2" style="padding-left: 10px">
        <el-card class="box-card card_4_body" style="min-height: 1em;" align="middle" onclick="">
          <span class="card_title">大屏4</span>
          <div class="el-card__body mid">
            <span class="card_num">12</span>
          </div>
        </el-card>
      </el-col>
      <el-col :sm="2" :lg="2" style="padding-left: 10px">
        <el-card class="box-card card_1_body" style="min-height: 1em;" align="middle" onclick="">
          <span class="card_title">大屏1</span>
          <div class="el-card__body mid">
            <span class="card_num">56</span>
          </div>
        </el-card>
      </el-col>

      <el-col :sm="2" :lg="2" style="padding-left: 10px">
        <el-card class="box-card card_2_body" style="min-height: 1em;" align="middle" onclick="">
          <span class="card_title">大屏2</span>
          <div class="el-card__body mid">
            <span class="card_num">123</span>
          </div>
        </el-card>
      </el-col>

      <el-col :sm="2" :lg="2" style="padding-left: 10px">
        <el-card class="box-card card_3_body" style="min-height: 1em;" align="middle" onclick="">
          <span class="card_title">大屏3</span>
          <div class="el-card__body mid">
            <span class="card_num">78</span>
          </div>
        </el-card>
      </el-col>

      <el-col :sm="2" :lg="2" style="padding-left: 10px">
        <el-card class="box-card card_4_body" style="min-height: 1em;" align="middle" onclick="">
          <span class="card_title">大屏4</span>
          <div class="el-card__body mid">
            <span class="card_num">12</span>
          </div>
        </el-card>
      </el-col>
    </el-row>
</template>

<script>

const animationDuration = 6000

export default {
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {

    }
  }
}
</script>
